<template>
    <div class="loginContainer">
        <el-button plain type="text" style="position:absolute;left:20px;top:20px;font-size:18px;"
            @click="back">返回</el-button>
        <div class="box">
            <div class="itemBox">
                <div>1.获取指定大小的随机图片</div>
                <img src="https://picsum.photos/300/400" alt="">
                <div>(300*400)</div>
            </div>
            <div class="itemBox">
                <div>2.若只指定一个,则宽高相等</div>
                <img src="https://picsum.photos/300" alt="">
                <div>(300*300)</div>
            </div>
            <div class="itemBox">
                <div>3.指定图库指定id</div>
                <img src="https://picsum.photos/id/125/200/300" alt="">
                <div>id:125/(200*300)</div>
            </div>
            <div class="itemBox">
                <div>4.根据传入固定seed值获得相同的随机图像,方法是在URL开头添加/seed/{seed}</div>
                <img src="https://picsum.photos/seed/sdf/200" alt="">
                <div>seed:sdf/(200*300){将传入的seed值转成唯一的哈希码,并用该哈希码生成图片,因此相同的seed值返回同一张图片}</div>
            </div>
            <div class="itemBox">
                <div>5.在链接末尾添加?grayscale,生成灰度图片</div>
                <img src="https://picsum.photos/200/300?grayscale" alt="">
                <div>灰度图片/(200*300)</div>
            </div>
            <div class="itemBox">
                <div>6.在链接末尾添加?blue,生成模糊图片</div>
                <img src="https://picsum.photos/200/200/?blur=5" alt="">
                <div>模糊图片blur值1-10可选,来调整模糊量/(200*300)</div>
            </div>
            <div class="itemBox">
                <div>7.请求多张相同大小的图像,请添加random查询参数以防止图像被缓存</div>
                <img src="https://picsum.photos/200/300?random=1">
                <img src="https://picsum.photos/200/300?random=2">
                <div>random参数/(200*300)</div>
            </div>
            <div class="itemBox">
                <div>8.指定图片格式,在结尾加上相应的后缀支持jpg,webp(png搜索说支持,实测不行)</div>
                <img src="https://picsum.photos/200/300.jpg">
                <div>jpg格式/(200*300)</div>
                <img src="https://picsum.photos/200/300.webp">
                <div>webp格式/(200*300)</div>
                <img src="https://picsum.photos/200/300.png">
                <div>png格式/(200*300)</div>
            </div>
            <div class="itemBox">
                <div>
                    9.图片列表:https://picsum.photos/v2/list,默认每页30条,https://picsum.photos/v2/list?page=2&limit=10,通过page参数请求设置页码,通过limit设置每页请求个数
                </div>
                <div>数据格式:<img :src="example" style="width:200px;margin-left:20px;">
                </div>
            </div>
        </div>

    </div>
</template>
<!-- 随机生成图片库Lorem Picsum -->
<script lang="ts" setup>
import { ref } from 'vue'
import example from '../assets/example.png'
const back = () => {
    window.history.back()
}
</script>
<style lang="scss" scoped>
.loginContainer {
    height: calc(100vh - 120px);
    width: calc(100vw - 120px);
    margin: 60px;
    box-sizing: border-box;
}

.box {
    padding-top: 30px;

}

.itemBox {
    margin: 20px auto;

    img {
        margin-top: 20px;
        width: auto;
        height: auto;
    }
}
</style>
  